import React from 'react'
import FullScreen from 'components/full-screen'
import { Button, Radio } from 'antd'
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import Condition from 'components/condition'
const { If } = Condition;
import SimpleFlow from 'components/simple-flow'
import { nodeTypes } from "components/simple-flow/node-list";

export default {
  key: 'full-screen',
  name: 'FullScreen 全屏',
  author: '张然',
  description: '全屏的容器组件。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'className', description: '容器的类。', type: 'string', defaultValue: '-'
      },{
        param: 'style', description: '容器的样式。', type: 'object', defaultValue: '-'
      },{
        param: 'hasMask', description: '是否需要背景蒙版。', type: 'bool', defaultValue: 'true'
      },{
        param: 'animateIn', description: '出现时的动画名，来源::animate.css::。', type: 'string', defaultValue: 'zoomInDown'
      },{
        param: 'animateOut', description: '消失时的动画名，来源::animate.css::。', type: 'string', defaultValue: 'zoomOutDown'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '用一个值控制控制是否渲染。',
      state: {
        visible: false,
        nodes: [
          {type: nodeTypes.START, id: 'start', title: '开始'},
          {type: nodeTypes.END, id: 'end', title: '结束'}
        ],
        routes: [
          {from: 'start', to: 'end'}
        ],
        selectedNode: null
      },
      getMethod: context => {
        return {
          handleChangeVisible: visible => {
            context.setState({ visible });
          },
          handleChange: (nodes, routes) => {
            context.setState({ nodes, routes });
          },
          handleSelectNode: node => {
            context.setState({ selectedNode: node })
          }
        }
      },
      getContent: context => {
        const { visible } = context.state;
        const { nodes, routes, selectedNode } = context.state;
        return (
          <div>
            <Button onClick={() => context.handleChangeVisible(true)}>显示全屏</Button>
            <If value={visible}>
              <FullScreen animateIn="fadeIn" animateOut="fadeOut">
                <div style={{
                  width: '100%',
                  height: '100%'
                }}>
                  <SimpleFlow valueKey="id"
                              nodes={nodes}
                              routes={routes}
                              selectedNode={selectedNode}
                              onSelectNode={context.handleSelectNode}
                              onChange={context.handleChange}/>
                  <Button onClick={() => context.handleChangeVisible(false)}
                          style={{ position: 'absolute', right: 20, top: 20 }}>关闭全屏</Button>
                </div>
              </FullScreen>
            </If>
          </div>
        )
      }
    },
    {
      title: '各种动画效果',
      description: '可以设置出现和消失时的动画效果。',
      state: {
        visible: false,
        animateIn: 'zoomInDown',
        animateOut: 'zoomOutDown'
      },
      getMethod: context => {
        return {
          handleChangeVisible: visible => {
            context.setState({ visible });
          },
          handleChangeAnimateIn: e => {
            context.setState({ animateIn: e.target.value })
          },
          handleChangeAnimateOut: e => {
            context.setState({ animateOut: e.target.value })
          }
        }
      },
      getContent: context => {
        const { visible, animateIn, animateOut } = context.state;
        return (
          <div>
            出现动画
            <div>
              <RadioGroup onChange={context.handleChangeAnimateIn} value={animateIn} size="small">
                <RadioButton value="zoomInDown">zoomInDown</RadioButton>
                <RadioButton value="fadeIn">fadeIn</RadioButton>
                <RadioButton value="flipInX">flipInX</RadioButton>
                <RadioButton value="rollIn">rollIn</RadioButton>
                <RadioButton value="lightSpeedIn">lightSpeedIn</RadioButton>
              </RadioGroup>
            </div>
            <br/>
            结束动画
            <div>
              <RadioGroup onChange={context.handleChangeAnimateOut} value={animateOut} size="small">
                <RadioButton value="zoomOutDown">zoomOutDown</RadioButton>
                <RadioButton value="fadeOut">fadeOut</RadioButton>
                <RadioButton value="flipOutX">flipInX</RadioButton>
                <RadioButton value="rollOut">rollOut</RadioButton>
                <RadioButton value="lightSpeedOut">lightSpeedOut</RadioButton>
              </RadioGroup>
            </div>
            <br/>

            <Button onClick={() => context.handleChangeVisible(true)}>显示全屏</Button>
            <If value={visible}>
              <FullScreen animateIn={animateIn} animateOut={animateOut}>
                <div style={{
                  width: '100%',
                  height: '100%',
                  background: 'white',
                  padding: 20
                }}>
                  <Button onClick={() => context.handleChangeVisible(false)}>关闭全屏</Button>
                </div>
              </FullScreen>
            </If>
          </div>
        )
      }
    }
  ]
}
